<script setup lang="ts">
import { ref } from 'vue'

const username = ref('')
const password = ref('')

const login = () => {
    console.log(username.value, password.value)
}
const reset = () => {
    username.value = ''
    password.value = ''
}

const changeUserName = (e: Event) => {
    username.value = (e.target as HTMLInputElement).value
}
const changePassword = (e: Event) => {
    password.value = (e.target as HTMLInputElement).value
}

</script>


<template>
    <div id="app">

        <!-- v-model 双向绑定 -->
        账户：<input type="text" v-model="username"> <br><br>
        密码：<input type="password" v-model="password"> <br><br>
        <button @click="login" style="color: red;">登录</button>
        <button @click="reset" style="color: red;">重置</button>

        <hr>

        <!-- 原始双向绑定方法 -->
        账户：<input type="text" :value="username" @input="changeUserName"> <br><br>
        密码：<input type="password" :value="password" @input="changePassword"> <br><br>
        <button @click="login">登录</button>
        <button @click="reset">重置</button>
    </div>
</template>


<style></style>